<template>
	<div class="index">
		<div class="goods">
			<img class="goodsImg" :src="groupInfo.logoUrl" />
			<div class="goodsInfo">
				<div class="goodsInfoFirstDiv">
					<span class="goodsName">{{groupInfo.templateTitle}}</span>
					<span :style="{color:textColor}" class="personNum">参与人数：{{groupInfo.joiningGroupNum}}</span>
				</div>
				<div class="oldPrice">原价：{{groupInfo.originalPrice}}/人</div>
				<div class="courseNum">课程数：{{groupInfo.classHours}}节</div>
				<div style="display:flex;justify-content: space-between;align-items: center;">
					<div class="curPrice">底价：{{groupInfo.currentPrice}}/人</div>
					<van-button class="smallDangerBtn" size="small" type='danger' v-show="bargaining">邀请好友</van-button>
				</div>
			</div>
		</div>
		<div class="goods" :style="{display:'block'}">
			<div class="helpInfo">
				<span class="goodsName">
					帮<span :style="{color:'red !important'}">蛤哈哈</span>砍价吧
				</span>
				<span :style="{color:textColor,fontSize:'13px'}">砍价截止时间：2020/11/11</span>
			</div>
			<van-progress stroke-width="12" color="#ee0a24" :percentage="50" />
			<div class="helpBtn">
				<van-button size="small" type="primary" round>找人帮忙</van-button>
				<van-button @click='handleHelp' size="small" v-if="!isHelped" type="danger" round>猛砍一刀</van-button>
				<van-button round class="helpedBtn" size="small" disabled="" v-else>您已砍过</van-button>
			</div>
			<div class="helpPersonList" v-for='item in 3' :key='item' v-show="isHelped">
				<div class="helpPersonLeft">
					<img class="helpPersonItem" src="../assets/images/u=368065610,855414273&fm=26&gp=0.jpg" />
					<span :style="{fontSize:'13px'}"><span :style="{color:'red !important'}">哈哈</span>帮砍一刀</span>
				</div>
				<span style="color: red;">￥88.88</span>
			</div>
		</div>
		<div class="connectionInfo">
			<div class="left">
				<div class="infoItem">活动地点：{{groupInfo.addr}}</div>
				<div class="infoItem">联系人：{{groupInfo.contactPerson}}</div>
				<div>联系方式：
					<span :style="{color:textColor}" class="phone">{{groupInfo.contactDetails}}</span>
				</div>
			</div>
			<!-- <div v-if="bargaining || groupInfo.isJoinGroup === 2">
				<img class="QRCode" src="../assets/images/codeImg.jpg" />
			</div> -->
			<!-- <div v-else class="joinBtn">
				<van-button class="smallDangerBtn" type="danger" size="small">参与拼团</van-button>
			</div> -->
		</div>
	</div>
</template>


<script>
	import share from '../weixin/share.js'
	const serviceAPI = require('@/serviceAPI.js')
	export default {
		data() {
			return {
				jssdkConfigInfo:{},
				groupInfo: {},
				activeInfo: {}, //活动详情
				activityCode: '', // 活动编号
				textColor: '#4f9fef',
				show: true,
				isHelped: false, //是否已经帮砍
				imgs: [require('../assets/images/u=368065610,855414273&fm=26&gp=0.jpg'), require(
					'../assets/images/u=368065610,855414273&fm=26&gp=0.jpg')]
			}
		},
		async created() {
			this.activityCode = this.$route.params.activityCode
			await this.getActiveInfo()
		},
		methods: {
			async handleShare(){
				await this.getConfigInfo()
				try{
					share({...this.jssdkConfigInfo,title:this.activeInfo.activityTitle,desc:this.groupInfo.templateTitle,imgUrl:this.groupInfo.logoUrl,link:window.location.href})
				}catch(e){
					//TODO handle the exception
				}
			},
			// 获取jssdk配置信息
			async getConfigInfo(){
				const res = await this.$axios.post(serviceAPI.getConfigInfo,{url:(window.location.href)})
				if(res.data.code === 10000){
					this.jssdkConfigInfo = res.data.data
				}
			},
			
			// 获取拼团信息
			async getGroupInfo() {
				const res = await this.$axios.post(serviceAPI.groupInfo, {
					openId:localStorage.getItem('openId'),
					// openId:'otIGG6CacfcWOZMuusiauprwcNVY',
					activityCode: this.activityCode
				})
				if (res.data.code === 10000) {
					this.groupInfo = res.data.data
				}
			},
			// 获取活动详情
			async getActiveInfo() {
				const res = await this.$axios.get(`${serviceAPI.getActiveInfo}?activityCode=${this.activityCode}` + '')
				if (res.data.code === 10000) {
					this.activeInfo = res.data.data
				}
			},
			submit() {
				this.show = false
			},
			handleHelp() { // 帮砍操作
				this.isHelped = true
			},
		}
	}
</script>

<style scoped>
	.helpPersonList {
		display: flex;
		justify-content: space-between;
		margin-top: 0.4375rem;
		align-items: center;
	}

	.helpPersonLeft {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.helpPersonLeft img {
		width: 2.75rem;
		height: 2.75rem;
		object-fit: cover;
		margin-right: 0.7125rem;
		border-radius: 50%;
	}

	.helpedBtn {
		color: white;
		background-color: #ccc;
	}

	.smallDangerBtn {
		padding: 0 16px;
		border-radius: 7px !important;
	}

	.van-popup {
		background: transparent;
		background-color: rgba(255, 255, 255, 0.8);
		margin-bottom: 115px;
	}

	/* .van-overlay{
		background: no-repeat;
	} */
	.bg {
		width: 100%;
		height: 80vh;
		object-fit: fill;
	}

	.operateBtn {
		position: absolute;
		bottom: 8rem;
		z-index: 99;
		padding: 10rpx;
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.operateBtn button {
		display: block;
		margin-top: 0.625rem;
		padding: 10px 50px;
		-moz-box-shadow: 0px 1px 6px #858585;
		-webkit-box-shadow: 0px 1px 6px #858585;
		box-shadow: 0px 1px 6px #858585;
	}

	.operateBtnItem {
		color: white;
		font-weight: bold;
		border-radius: 8px;
		outline: none;
		border: none;
		background-color: red;
	}

	.infoitem {
		font-size: 0.875rem;
		color: #000000;
		font-weight: 700;
	}

	.connectionInfo {
		padding: 0.625rem;
		padding-top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
	}

	.QRCode {
		width: 100px;
		height: 100px;
		object-fit: cover;
	}

	.joinBtn {
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.confirm {
		display: flex;
		justify-content: space-between;
		padding: 0.8rem;
		font-size: 14px;
	}

	.confirm span:nth-child(1) {
		color: red;
		font-weight: 700;
	}

	.confirm span:nth-child(2) {
		font-weight: 700;
	}

	.goods {
		background: white;
		padding: 0.825rem;
		display: flex;
		margin: 0 0.9rem 0.4rem 0.9rem;
	}

	.goodsImg {
		border-radius: 8px;
		flex: 3;
		width: 100px;
		height: 95px;
		object-fit: cover;
		margin-right: 0.7125rem;
	}

	.goodsInfo {
		flex: 7;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.goodsInfoFirstDiv {
		display: flex;
		justify-content: space-between;
	}

	.goodsName {
		font-weight: 600;
		font-size: 14px;
	}

	.personNum {
		font-size: 13px;
	}

	.oldPrice {
		color: #FF0000;
		text-decoration: line-through;
		font-size: 14px;
	}

	.courseNum {
		font-size: 13px;
	}

	.curPrice {
		font-size: 15px;
		font-weight: 700;
		color: #FF0000;
	}

	.helpInfo {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 0.4375rem
	}

	.helpBtn {
		margin-top: 0.525rem;
		display: flex;
		justify-content: space-between;
	}

	.person {
		display: flex;
		justify-content: space-around;
		padding: 0.625rem 0.3rem;
	}

	.personItem {
		border-radius: 50%;
		border: 1px solid #eee;
		width: 3.75rem;
		height: 3.75rem;
	}

	.addPerson {
		background: white;
		text-align: center;
		line-height: 3.75rem;
		font-size: 41px;
		color: #eee;
	}

	.person img {
		width: 3.75rem;
		height: 3.75rem;
		object-fit: cover;

	}
</style>
